<template>
    <div>
      <img width="100%" height="122px" :src="orgPubImg" v-if="orgId">
      <img width="30px" height="30px" class="icon" :src="orgImg" v-if="orgId">
      <p class="org" v-if="orgId">{{ orgInfo.orgNames }}</p>

      <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10" infinite-scroll-immediate-check="false">
        <news-item v-for="item in newsList" :key="item.newsId.value" :newsItem="item" @click.native="toDetail(item)" ></news-item>
      </ul>
    </div>
</template>

<script>
  import NewsItem from './NewsItem.vue';
  import imgMap from '../../../static/js/imgmap.js';
  import * as types from '../../constant/ConstantConfig.js';
    export default {
      data() {
        return {
          orgId:this.$route.query.orgId,
          orgInfo: {},
          newsList: [],
          loading: false,
          page: 1,
          loaded: false,   //是否加载完成
        }
      },

      computed: {
        orgPubImg() {
          if(this.orgInfo.orgPubUrl) return this.orgInfo.orgPubUrl;
          return imgMap.orgPubImg;
        },
        orgImg() {
          if(this.orgInfo.photoUrl) return this.orgInfo.photoUrl;
          return imgMap.orgImg;
        }

      },

      components: {
        newsItem: NewsItem
      },

      methods:{
        toDetail(newsDetail) {
          window.location.href = types.NEWS_DETAIL + newsDetail.newsId.value;
        },

        loadMore() {
          if(!this.loaded) {
            this.requestNewsList();
          }
        },

        requestNewsList() {
          this.loading = true;
          let request = {
            orgId:this.orgId,
            tpId:0,
            type:'1051',
            authodId:0,
            newsStyle:0,
            pageNum:this.page,
            pageSize:10
          };
          let vm = this;
          this.$store.dispatch("newsList", request).then((newsList) => {
            vm.page++;
            if(newsList) {
              for(let i = 0; i < newsList.length; i++) {
                vm.newsList.push(newsList[i]);
              }
              vm.loaded = (newsList.length != 10);
            } else {
              vm.loaded = true;
            }
            vm.loading = false;
          }).catch(error => {
            vm.loading = false;
            vm.loaded = true;
            this.$toast(error.message);
          });
        },

        requestOrgInfo() {
          if(!this.orgId) return;
           let vm = this;
           let request = {orgId: this.orgId};
            this.$store.dispatch("orgDetail", request).then((orgInfo) => {
              vm.orgInfo = orgInfo;
            }).catch(error => {
              this.$toast(error.message);
            });
        }

      },

      created() {
        this.requestNewsList();
        this.requestOrgInfo();
      }
    }
</script>

<style scoped>
  ul,li{ padding:0;list-style:none; margin: 0}

  .org{
    color: white;
    font-weight: 400;
    font-size: 15px;
    position: absolute;
    line-height: 23px;
    text-shadow: 2px 2px 10px black;
    left:55px;
    top: 50px;
  }

  .icon{
    width: 32px;
    height: 32px;
    left: 16px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    top: 60px;
  }

</style>
